<template>
	<view class="content" v-if="myBackground!=''">
		<view class="column width-full" :style="{
			  backgroundImage: `url('${myBackground}')`,
			  backgroundSize: '100% 100%',
			  height:'500rpx',
			  overflow:'hidden'
			}">
			<view class="" @click="login">
				<view class="avatar-section flex flex-center items-center">
					<image src="../../static/member-user.png" mode="" class="member-img"
						v-if='userInfo.is_activated == 1'></image>
					<image :src="userInfo.avatar?userInfo.avatar:userA" mode=""
						style='width: 136rpx; height: 136rpx; border-radius: 50%;'>
					</image>
				</view>
				<view class="fontSize-34 weight-700 marginTop-20 text-center" style="color: #333;">
					<!-- 您还未登录，去登录 -->
					<view class="flex flex-center">
						<view class="marginRight-20">
							{{userInfo.username}}
						</view>
						<view class="width-92 height-46 fontSize-24" style="color: #7D4C05;background: linear-gradient( 97deg, #FFEFD9 0%, #E2B372 100%);
						border-radius: 50rpx;line-height: 46rpx;" v-if='userInfo.is_activated == 1'>
							{{userInfo.member_type}}
						</view>
					</view>

				</view>
				<view class="fontSize-28 marginTop-10 text-center" style="color: #666;"
					v-if='userInfo.is_activated == 1'>
					{{userInfo.end_time}}到期
				</view>
			</view>

			<view class="groups paddingLeft-32 paddingRight-32 box-sizing">
				<!-- 	<view class="">
					百霸服务
				</view> -->
				<view class="flex space-between items-center">
					<view class="flex column bookItem" @click="download">
						<image src="../../static/pdf.png" mode="" class="book-img"></image>
						<view class="fontSize-28 weight-700 marginTop-60 text-center" style="color: #333;">
							纸质版
						</view>
						<view class="fontSize-24 color-999 text-center marginTop-10">
							导出单词纸PDF
						</view>
					</view>
					<view class="flex column bookItem" style="background-color: rgba(221, 242, 254, 1);"
						@click="successShow = true">
						<image src="../../static/remeber.png" mode="" class="book-img"></image>
						<view class="fontSize-28 weight-700 marginTop-60 text-center" style="color: #333;">
							有家记忆法
						</view>
						<view class="fontSize-24 color-999 text-center marginTop-10">
							学习不再难
						</view>
					</view>
					<view class=" flex column bookItem" style="background-color: rgba(254, 240, 221, 1);"
						@click='toMemberCenter'>
						<image src="../../static/member.png" mode="" class="book-img"></image>
						<view class=" fontSize-28 weight-700 marginTop-60 text-center" style="color: #333;">
							百霸智育会员
						</view>
						<view class="fontSize-24 color-999 text-center marginTop-10">
							仅需0.3元/天
						</view>
					</view>
				</view>
			</view>

		</view>
		<view style="background-color: #fff;">

			<view class="flex column" style="border-top: 1rpx solid #e4e4e4; margin-top: 74rpx;">
				<view class="flex  space-between items-center cell box-sizing">
					<view class="btnShare flex box-sizing space-between items-center" @click='toCodePage'>
						<view class="">
							兑换码
						</view>
						<up-icon name="arrow-right" color="#909399" size="16"></up-icon>
					</view>
				</view>
				<view class="flex  space-between items-center cell box-sizing">
					<view @click="toPage(0)" class="btnShare flex box-sizing space-between items-center">
						<view class="">
							刷词设置
						</view>
						<up-icon name="arrow-right" color="#909399" size="16"></up-icon>
					</view>
				</view>
				<!-- 			<view class="flex  space-between items-center cell box-sizing">
					<view @click="toPage(1)" class="btnShare flex box-sizing space-between items-center">
						<view class="">
							记词设置
						</view>
						<up-icon name="arrow-right" color="#909399" size="16"></up-icon>
					</view>
				</view> -->

				<view class="flex space-between items-center  cell box-sizing">
					<view @click="toPage(3)" class="btnShare flex box-sizing space-between items-center">
						<view class="">
							红旗老师简介
						</view>
						<up-icon name="arrow-right" color="#909399" size="16"></up-icon>
					</view>
				</view>
				<view class="flex space-between items-center  cell box-sizing" v-if="userInfo.identity=='campus'">
					<view @click="goTap" class="btnShare flex box-sizing space-between items-center">
						<view class="">
							切换学员
						</view>
						<up-icon name="arrow-right" color="#909399" size="16"></up-icon>
					</view>
				</view>
				<view class="flex space-between items-center cell box-sizing" >
					<button open-type="share" class="btnShare flex box-sizing space-between items-center">
						<view class="">
							分享小程序
						</view>
						<up-icon name="arrow-right" color="#909399" size="16"></up-icon>
					</button>
				</view>
				<view class="flex space-between items-center  cell box-sizing" v-if="userInfo.identity=='sell'">
					<view @click="toSpreadIndex" class="btnShare flex box-sizing space-between items-center">
						<view class="">
							推广合作
						</view>
						<up-icon name="arrow-right" color="#909399" size="16"></up-icon>
					</view>
				</view>
				<view class="flex space-between items-center  cell box-sizing">
					<view @click="toPage(2)" class="btnShare flex box-sizing space-between items-center">
						<view class="">
							关于我们
						</view>
						<up-icon name="arrow-right" color="#909399" size="16"></up-icon>
					</view>
				</view>


			</view>

		</view>
		<up-popup :show="successShow" mode='center'>
			<swiper class="swiper" circular :duration="duration" :indicatorDots="indicatorDots"
				indicator-color='rgba(235, 235, 235, 1)' indicator-active-color='rgba(81, 213, 128, 1)'
				@change='swiperChange'>
				<swiper-item v-for="(item,index) in descList" :key="index">
					<view class="swiper-item ">
						<view class="width-350 height-350" style="margin: 0 auto;">
							<image :src="item.pic" mode="" style="width: 100%; height: 100%;"></image>
						</view>
						<view class="fontSize-40 weight-700 color-333 text-center marginTop-40">
							{{item.title}}
						</view>
						<view class="fontSize-28 color-666 text-center  marginTop-20 paddingLeft-55 paddingRight-55">
							{{item.desc}}
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="width-526 height-92 borderRadius-92 colorBj-51D580 color-white text-center btn2"
				style="line-height: 92rpx;" @click='successShow = false'>
				知道了
			</view>
		</up-popup>
	</view>

</template>

<script setup>
	import {
		ref,
		computed,
		defineProps,
		inject,
		defineExpose
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const getUserInfoApi = inject('getUserInfo');
	const getUserInfoNewApi = inject('getUserInfoNew');
	const exportWordsApi = inject('exportWords')

	// const props = defineProps({userInfo:Object});
	// const userInfo = computed(()=>props.userInfo);
	const userInfo = ref({});
	const myBackground = ref('');
	const is_activated = ref(0)
	const getRemWordDescApi = inject('getRemWordDesc')
	const indicatorDots = ref(true)
	const duration = ref(500)
	const memoryList = ref({})
	const current = ref(0)
	const descList = ref([])
	// 介绍弹窗
	const successShow = ref(false)

	const setUserInfo = (data) => {
		userInfo.value = data
	}
	onLoad(() => {
		getRemWordDescApi().then(res => {
			console.log(res, 999999999)
			descList.value = res.stepDesc
		})
	})
	const swiperChange = (e) => {
		current.value = e.detail.current
	}
	const identity=ref('')
	const loginWordCode = () => {
		// getUserInfoApi().then(res => {

		// 	uni.setStorageSync('userInfo', res)
		// 	userInfo.value = res
		// })

		getUserInfoNewApi().then(res => {
			console.log('新用户信息', res)
			uni.setStorageSync('userInfo', res)
			userInfo.value = res
			console.log(uni.getStorageSync('identity'))
			if(uni.getStorageSync('identity')!=''){
				userInfo.value.identity=uni.getStorageSync('identity')
				console.log(userInfo.value.identity,230)
			}
			myBackground.value = res.myBackground
			is_activated.value = res.is_activated
		})


	};
	onShow(() => {

		loginWordCode()
	})
	const download = () => {

		exportWordsApi({


		}).then(res => {
			console.log(res, 'tttttttttt')
			if(res.status==201){
				uni.showToast({
					title:res.msg,
					icon:"none",
					duration:3000
				})
			}else{
				downloadExcel(res);
			}
		})
	}
	const downloadExcel = async (url) => {
		try {
			// 使用 uni.downloadFile 下载文件  
			const res = await uni.downloadFile({
				url: url, // 后端提供的下载链接  
				success: (downloadRes) => {
					if (downloadRes.statusCode === 200) {
						// 文件下载成功，使用 uni.saveFile 保存文件  
						uni.saveFile({
							tempFilePath: downloadRes.tempFilePath, // 临时文件路径  
							success: (saveRes) => {
								// 文件保存成功，saveRes.savedFilePath 为保存后的文件路径  
								console.log('文件保存成功：', saveRes.savedFilePath);
								// 你可以在这里提示用户文件已保存，或者打开文件  
								uni.openDocument({
									filePath: saveRes.savedFilePath,
									fileType: 'xlsx',
									showMenu: true,
									success: () => {
										uni.showToast({
											title: '打开文档成功',
											icon: 'success',
											mask: true,
										});
									},
									fail: (error) => {
										console.log('error', error);
									},
								});

							},
							fail: (err) => {
								console.error('文件保存失败：', err);
							},
						});
					} else {
						console.error('文件下载失败，状态码：', downloadRes.statusCode);
					}
				},
				fail: (err) => {
					console.error('文件下载失败：', err);
				},
			});
		} catch (error) {
			console.error('下载过程中发生错误：', error);
		}
	};


	const userA = ref('https://cdn.uviewui.com/uview/album/1.jpg');
	const login = () => {
		// uni.reLaunch({
		// 	url:'/pages/index/index'
		// })

		uni.navigateTo({
			url: '/pages/my/editUser'
		})

	}
	const toNewWord = (t) => {
		if (t == 1) {
			uni.navigateTo({
				url: '/pages/index/wordBank'
			})
		} else {
			uni.navigateTo({
				url: '/pages/index/newWordBook?type=' + t
			})
		}

	}
	const toPage = (key) => {
		let urls = ['my/brushWordSetUp', 'my/rememberWordSetup', 'my/about', 'my/overview']
		// if (!urls[key]) return
		uni.navigateTo({
			url: '/pages/' + urls[key]
		})
	}
	const goTap = () => {
		uni.navigateTo({
			url:'/pagesA/index/switchStudents?student_id='+userInfo.value.student_id
		})
	}
	
	const toPage2 = (index) => {
		// if (!urls[key]) return
		uni.navigateTo({
			url: '/pages/my/phonetics?index=' + index
		})
	}
	const toCodePage = () => {
		uni.navigateTo({
			url: '/pagesA/my/memberCode?is_activated=' + is_activated.value
		})
	}
	const toMemberCenter = () => {
		uni.navigateTo({
			url: '/pagesA/my/memberCenter?is_activated=' + is_activated.value
		})
	}
	const toSpreadIndex = () => {
		uni.navigateTo({
			url: '/pagesA/my/spreadIndex'
		})
	}




	defineExpose({
		userInfo,
		setUserInfo
	})
	// import { inject,ref } from 'vue'
	// const title = ref('百霸智育');
	// const tabbarCurrent = ref(0);
	// const change = (index)=>{
	// 	if(tabbarCurrent.value == index) return 
	// 	tabbarCurrent.value = index
	// 	console.log(index)
	// }
</script>

<style lang="scss" scoped>
	.up-cell-group ::v-deep .u-cell__body {
		// padding: 13px 15px;
		padding: 0;
	}

	.cell {
		font-size: 15px;
		color: #303133;
		line-height: 22px;

		border-bottom: 1rpx solid #e4e4e4;
		// transform: scaleY(0.5);
	}

	.paddingCell {
		padding: 13px 15px;
	}

	.btnShare {
		padding: 13px 15px;
		color: rgba(0, 0, 0, 0.6);
		background-color: #fff;
		margin: 0;
		flex: 1;
		line-height: 44rpx;
		font-size: 32rpx;
		color: #303133;
		text-align: left;
	}

	.btnShare::after {
		border: none;
	}

	.bookItem {
		position: relative;
		width: 210rpx;
		height: 160rpx;
		background-color: rgba(255, 236, 236, 1);
		border-radius: 20rpx;

		.book-img {
			width: 90rpx;
			height: 90rpx;
			position: absolute;
			top: -45rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.avatar-section {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 70rpx;
		position: relative;

	}

	.groups {
		width: 100%;
		position: absolute;
		top: 380rpx;
		left: 50%;
		transform: translateX(-50%);

	}

	.member-img {
		width: 108rpx;
		height: 74rpx;
		position: absolute;
		top: -40rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.swiper {
		width: 600rpx;
		height: 900rpx;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
	}

	.swiper-item {
		margin: 0 auto;
		height: 900rpx;

	}

	::v-deep .u-popup__content {
		border-radius: 44rpx;
	}

	.btn2 {
		margin: 20rpx auto;
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>